<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #result{
            width: 200px;
            height: 100px;
            border: 1px solid;
        }
    </style>
</head>
<body>
    <button>点击发送请求</button>
    <div id="result"></div>
</body>
<script>
    // 获取button元素
    const button = document.getElementsByTagName('button')[0];
    const result = document.getElementById('result');
    // 当点击整个button就会去指定的地方接受信息
    button.onclick = function(){
        // 创建对象
        const xhr = new XMLHttpRequest();
        // 初始化，设置请求方法和url
        xhr.open('GET','http://127.0.0.1:8000/server');
        // 发送
        xhr.send();

        xhr.onreadystatechange = function(){
            // 判断等于4 是是否完全接收
            if(xhr.readyState ===4){
                // 判断响应状态码
                // 2开头的都是成功
                if(xhr.status>=200 && xhr.status<300){
                    // 处理结果 
                    console.log(xhr.status); //状态码
                    console.log(xhr.statusText); //状态字符
                    console.log(xhr.getAllResponseHeaders());//响应头
                    console.log(xhr.response); //响应体
                    // response 相当于那边携带的数据
                    result.innerHTML = xhr.response;
                }else{
                    console.log('失败');
                }
            }
        };
    }
</script>
</html>